<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>类别管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="typeTable" lay-filter="typeTable"></table>

<script type="text/html" id="typeAdd">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">创建类别</button>
    </div>
</script>

<script type="text/html" id="typeEdit">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑类别</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除类别</a>
</script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script>
        layui.use(['table','layer','form','jquery'], function () {
            var table = layui.table,
                layer = layui.layer,
                form = layui.form,
                $ = layui.jquery;

            table.render({
                elem: '#typeTable',
                url:'${pageContext.request.contextPath}/selectAllType.do',
                title: 'type管理',
                toolbar:"#typeAdd",
                cols: [[
                    {field:'tName', title:'类别名称'},
                    {fixed: 'right', title:'操作', toolbar: '#typeEdit'}
                ]],
                page: true,
                limits:[5,10,15,20],   //显示的几页
            });

            //监听创建事件
            table.on('toolbar(typeTable)', function(obj){
                if(obj.event === 'add'){
                    layer.open({
                        type:1,//type=1 弹出页面层
                        title:"创建分类",
                        content: $("#typePanel").html(),//弹出层内容
                        area:['380px','160px'],
                        btn: ['保存', '重置', '取消'],
                        yes: function(index, layero){//点击保存按钮执行的方法
                            var type = form.val("typePanel");//获取form修改后的值
                            var typeStr = JSON.stringify(type);
                            $.post(("${pageContext.request.contextPath}/createType.do"),{typeStr:typeStr},function(result){
                                if(result.status){
                                    table.reload("typeTable",{});
                                    layer.close(index);//关闭弹框
                                }else{
                                    layer.msg(result.message);
                                    return false;
                                }
                            },"json");
                        },btn2: function(index, layero){//点击重置按钮执行的方法
                            form.val("typePanel",{
                                "tName":""
                            });
                            return false;
                        },btn3: function(index, layero){//点击取消按钮执行的方法
                        },success: function(){//只要打开弹出层就执行此方法
                            form.val("typePanel",{
                                "tName":""
                            });
                            form.render();//渲染表单,如果不写,弹出层内容是空白
                        }
                    });
                }
            });

            //监听编辑、删除事件
            //tool(subject)对应table表格中的lay-filter="subject"
            table.on('tool(typeTable)', function(obj){//obj代表一行数据和编辑按钮 删除按钮
                var data = obj.data;//obj.data代表一行数据
                var tId = data.tId;
                if(obj.event === 'del'){
                    layer.confirm('确定要删除么？', function(index){//弹出询问框
                        $.post(("${pageContext.request.contextPath}/deletetypeByTid.do"),{tId:tId},function(result){
                            if(result.status){
                                table.reload("typeTable",{});
                                layer.close(index);//关闭弹框
                            }else{
                                layer.msg(result.message);
                                return false;
                            }
                        },"json");
                    });
                }else if(obj.event === 'edit'){
                    layer.open({
                        type:1,//type=1 弹出页面层
                        title:"修改学科信息",
                        content: $("#typePanel").html(),//弹出层内容
                        area:['380px','160px'],
                        btn: ['保存', '重置', '取消'],
                        yes: function(index, layero){//点击保存按钮执行的方法
                            var type = form.val("typePanel");//获取form修改后的值
                            type.tId = tId;//将typeId注入获取的对象type中
                            var typeStr = JSON.stringify(type);
                            $.post("${pageContext.request.contextPath}/updatetypeByTId.do",{typeStr:typeStr},function(result){
                                if(result.status){
                                    table.reload("typeTable",{});
                                    layer.close(index);
                                }else{
                                    layer.msg(result.message);
                                    return false;
                                }
                            },"json");
                        },btn2: function(index, layero){//点击重置按钮执行的方法
                            form.val("typePanel",{
                                "tName":data.tName
                            });
                            return false; //开启该代码可禁止点击该按钮关闭
                        },btn3: function(index, layero){//点击取消按钮执行的方法
                        },success: function(){//只要打开弹出层就执行此方法
                            form.val("typePanel",{
                                "tName":data.tName
                            });
                            form.render();//渲染表单,如果不写,弹出层内容是空白
                        }
                    });
                }
            });

        });
    </script>
<!--  类别面板  -->
<script type="text/html" id="typePanel">
    <form class="layui-form" lay-filter="typePanel">
        <div class="layui-form-item">
            <label class="layui-form-label">类别名称</label>
            <div class="layui-input-inline">
                <input type="text" name="tName" placeholder="请输入类别名称" class="layui-input">
            </div>
        </div>
    </form>
</script>
</body>
</html>
